<template>
  <div class="bridge_card">
    <div class="title">桥梁基本状况卡片 <el-button type="primary" class="down">下载</el-button></div>
    <!--A 桥梁所处行政区划代码 -->
    <el-row class="row part" :span="24">
      <el-col :span="24" class="col">
        <span class="part_name">A:桥梁所处行政区划代码</span>
        <span class="value">3333333</span>
      </el-col>
    </el-row>
    <!-- B行政识别数据 -->
    <el-row class="row" :span="24">
      <el-col :span="24" class="col">
        <span class="part_name">B:行政识别数据</span>
        <span class="value"></span>
      </el-col>
    </el-row>
    <el-row class="row" :span="24">
      <el-col :span="8" class="col">
        <span class="label">路线编号：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">路线名称：</span>
        <span class="value">宝带公路</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">路线等级：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">桥梁编号：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">桥梁名称：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">桥位桩号：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">功能类型：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">被跨越道路（通道）名称：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">被跨越道路（通道）桩号：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">设计荷载：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">桥梁坡度：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">桥梁平曲线半径：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">建成时间：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">设计单位：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">施工单位：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">监理单位：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">业主单位：</span>
        <span class="value">LS</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">管养单位：</span>
        <span class="value">LS</span>
      </el-col>
    </el-row>
    <!--C 桥梁技术指标-->
    <el-row class="row" :span="24">
      <el-col :span="24" class="col">
        <span class="part_name">C:桥梁技术指标</span>
        <span class="value"></span>
      </el-col>
    </el-row>
    <el-row class="row" :span="24">
      <el-col :span="8" class="col">
        <span class="label">桥梁全长(m)：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">桥面总宽(m)：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">车道宽度(m)：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">人行道宽度(m)：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">护栏或防撞墙高度(m)：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">中央分隔带宽度(m)：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">桥面标准净空(m)：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">桥面实际净空(m)：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">桥下通航等级及标准净空(m)：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">桥下实际净空：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">引道总宽(m)：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">引道线形或曲线半径(m)：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">设计洪水频率及其水位：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">历史洪水：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="8" class="col">
        <span class="label">设计地震动峰值加速度系数：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="24" class="col">
        <span class="label">桥面高程(m)：</span>
        <span class="value">123333</span>
      </el-col>
    </el-row>
    <!-- D桥梁结构信息-->
    <el-row class="row" :span="24">
      <el-col :span="24" class="col">
        <span class="part_name">D:桥梁结构信息</span>
        <span class="value"></span>
      </el-col>
    </el-row>
    <el-row class="row" :span="24">
      <el-col :span="24" class="col">
        <span class="label">桥梁分孔(m)：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="24" class="col">
        <span class="label">桥梁结构：</span>
        <span class="value">123333</span>
      </el-col>
      <el-col :span="24" class="col"> <span class="label">上部结构形式与材料（主梁）：</span></el-col>
      <el-col :span="24" class="col">
        <el-table :data="state.info.list">
          <el-table-column label="序号" prop="num" />
          <el-table-column label="孔号" prop="kn" />
          <el-table-column label="结构形式" prop="jg" />
          <el-table-column label="材料" prop="cl" />
        </el-table>
      </el-col>
      <el-col :span="24" class="col" > <span class="label"> 桥面系形式与材料：</span></el-col>
      <el-col :span="10" class="col" style="margin-right:12px"> <span class="label">桥面铺装：</span></el-col>
      <el-col :span="10" class="col"> <span class="label">伸缩缝：</span></el-col>
      <el-col :span="10" class="col" style="margin-right:12px">
        <el-table :data="state.info.qmlist">
          <el-table-column label="序号" prop="num" />
          <el-table-column label="孔号" prop="kn" />
          <el-table-column label="材料" prop="cl" />
        </el-table>
      </el-col>
      <el-col :span="10" class="col" >
        <el-table :data="state.info.qmlist">
          <el-table-column label="序号" prop="num" />
          <el-table-column label="孔号" prop="kn" />
          <el-table-column label="材料" prop="cl" />
        </el-table>
      </el-col>
      <el-col :span="12" class="col" >
        <span class="label">人行道、路缘 左：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="12" class="col" >
        <span class="label">人行道、路缘 右：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="12" class="col" >
        <span class="label">栏杆、护栏 中护栏：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="12" class="col" >
        <span class="label">栏杆、护栏 中护栏：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="24" class="col" >
        <span class="label">照明、标志：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="24" class="col" > <span class="label">下部结构形式与材料：</span></el-col>
      <el-col :span="10" class="col" style="margin-right:12px"> <span class="label">桥台：</span></el-col>
      <el-col :span="10" class="col"> <span class="label">桥墩：</span></el-col>
      <el-col :span="10" class="col" style="margin-right:12px">
        <el-table :data="state.info.qmlist">
          <el-table-column label="序号" prop="num" />
          <el-table-column label="桥台号" prop="kn" />
          <el-table-column label="形式" prop="cl" />
          <el-table-column label="材料" prop="cl" />
        </el-table>
      </el-col>
      <el-col :span="10" class="col" >
        <el-table :data="state.info.qmlist">
            <el-table-column label="序号" prop="num" />
          <el-table-column label="桥墩号" prop="kn" />
          <el-table-column label="形式" prop="cl" />
          <el-table-column label="材料" prop="cl" />
        </el-table>
      </el-col>
      <el-col :span="6"  class="col">
        <span class="label">锥坡左(小桩号侧)：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="6"  class="col">
        <span class="label">锥坡右(小桩号侧)：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="6"  class="col">
        <span class="label">锥坡左(大桩号侧)：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="6"  class="col">
        <span class="label">锥坡右(大桩号侧)：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="12"  class="col">
        <span class="label">护坡(小桩号侧)：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="12"  class="col">
        <span class="label">护坡(大桩号侧)：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="6"  class="col">
        <span class="label">翼墙、耳墙左(小桩号侧)：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="6"  class="col">
        <span class="label">翼墙、耳墙右(小桩号侧)：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="6"  class="col">
        <span class="label">翼墙、耳墙左(大桩号侧)：</span>
        <span class="value">123333</span>
    </el-col>
    <el-col :span="6"  class="col">
        <span class="label">翼墙、耳墙右(大桩号侧)：</span>
        <span class="value">123333</span>
    </el-col>

    </el-row>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";

const view = reactive({
  info: {
    list: [
      { num: 1, kh: 1, jg: "结构形式", cl: "我是材料" },
      { num: 1, kh: 1, jg: "结构形式", cl: "我是材料" },
      { num: 1, kh: 1, jg: "结构形式", cl: "我是材料" },
      { num: 1, kh: 1, jg: "结构形式", cl: "我是材料" }
    ],
    qmlist: [
      { num: 1, kh: 1, jg: "结构形式", cl: "我是材料" },
      { num: 1, kh: 1, jg: "结构形式", cl: "我是材料" },
      { num: 1, kh: 1, jg: "结构形式", cl: "我是材料" },
      { num: 1, kh: 1, jg: "结构形式", cl: "我是材料" }
    ],
  }
});
const state = reactive({ ...useView(view), ...toRefs(view) });
</script>
<style lang="less" scoped>
:deep(.el-table__row:first-child) {
  border-top: solid 1px #eee;
}
:deep(.el-table__row:last-child) {
  border-bottom: solid 1px #eee;
}
.bridge_card {
  .title {
    font-weight: bold;
    margin-bottom: 16px;
    .down {
      margin-left: 10px;
    }
  }
  .part {
    margin-bottom: 8px;
  }
  .row {
    :deep(.el-col) {
      min-height: 28px;
    }
    .col {
      .part_name {
        color: #17b3a3;
        font-weight: bold;
      }
      .label {
        color: #333;
        font-weight: bold;
      }
      .value {
        color: #606266;
      }
    }
  }
}
</style>